import { Layout, Breadcrumb, Menu, Button, Modal, Spin, ConfigProvider } from "antd";
import zhCN from 'antd/lib/locale/zh_CN';

// import axios from "axios";
import Request from '../utils/request';

import Link from "next/link";
import { Router, useRouter } from "next/router";
import styles from "../styles/Layout.module.css";
import React, { useState, useEffect } from "react";
import Head from "next/head";
// import '../node_modules/antd/lib/style/themes/default.less';

import { useSelector, useDispatch } from "react-redux";

import useStore from '../utils/myStore';

import {
  HomeOutlined,
  SettingFilled,
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from "@ant-design/icons";
import TopHeader from "./topHeader";
import LeftSider from "./leftSider";
// import useSWR from 'swr'

const { SubMenu } = Menu;
const { Header, Footer, Sider, Content } = Layout;

// const useUser = () => ({ user: null, loading: false });

// class MainLayout extends React.Component {
Router.events.on("routeChangeStart", (url) => {
  console.log(url);
  // if (url.indexOf('sysSetting') > -1) {
  //   location.href = '/403'
  // }
});


function MainLayout(props) {
  const {
    currentPath,
    userData,
    loading,
    collapsed,
    logout,
    toggle,
    showLoading,
    hideLoading,

  } = useStore();


  const router = useRouter();


  useEffect(() => {
    const fecthData = async () => {
      const res = await Request.get("/api/hello");
      console.log(res);
    };
    fecthData();
    // console.log(res);
  }, []);


  useEffect(() => {
    if (!userData.name) {
      //判断是否登录
      router.push("/login");
    }

    // if(router.pathname.indexOf('sysSetting')!=-1 && router.pathname.indexOf('login') == -1) {   //鉴权
    //   router.push("/login");
    // }
  }, [userData]);

  const toggleCollapsed = () => {
    // setCollapsed(!collapsed);
    toggle();
    // state.collapsed=!state.collapsed
  };


  

  const handleOk = () => {
    console.log("do logout");
  };


  return (
    <ConfigProvider locale={zhCN}>
      <div>
        <Head>
          <title>绩效管理信息系统</title>
        </Head>
        {/* {loading ? <div className={styles.loadingPage}>
        <div className={styles.base}>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
          <div className={styles.cube}></div>
        </div>
      </div> : ''} */}
        <Spin spinning={loading}>
          <Layout theme="light">
            <TopHeader ></TopHeader>
            <Layout>
           <LeftSider />
              <Layout>
                <Content style={{ minHeight: "calc(100vh - 200px)", backgroundColor: 'white' }}>
                  <Header
                    style={{
                      display: "flex",
                      alignItems: "center",
                      backgroundColor: "white",
                      padding: "0 20px",
                    }}
                  >
                    {React.createElement(
                      collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                      {
                        className: styles.trigger,
                        onClick: toggle,
                      }
                    )}

                    <Breadcrumb>
                      <Breadcrumb.Item>
                        <Link href="/" style={{ cursor: "pointer" }}>
                          首页
                      </Link>
                      </Breadcrumb.Item>
                      {currentPath[0]?<Breadcrumb.Item>{currentPath[0]}</Breadcrumb.Item>:''}
                          {currentPath[1]?<Breadcrumb.Item>{currentPath[1]}</Breadcrumb.Item>:''}

                      {/* <Breadcrumb.Item>{pageName}</Breadcrumb.Item> */}
                    </Breadcrumb>
                  </Header>
                  <div style={{ padding: "20px" }}>{props.children}</div>
                </Content>
                <Footer className={styles.footer} style={{ height: "100px", borderTop: "1px solid rgba(0,0,0,.06)" }}>
                  {/* <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        ></a> */}
                Powered by ~~~
              </Footer>
              </Layout>
            </Layout>
          </Layout>
        </Spin>
      </div></ConfigProvider>
  );
}

// function NavItem({arr}) {
//   return arr.map(item=>{
//     if (item.sub) {
//       return <SubMenu key={Item.key} title={item.label}><NavItem arr={item.sub}></NavItem></SubMenu>;
//       // (<div>sub</div>)
//     } else {
//       return <Menu.item key={item.key}>{item.label}</Menu.item>;
//       // (<div>item</div>)
//     }
//   })
// }
// export async function getServerSideProps() {
//   console.log(' getServerSideProps ')
//   const res = await axios.get("/api/hello");
//   console.log(res);

//   return { props:{res: res} };
// };
export default MainLayout;
